<template>
    <div class="template-container">
        <div class="container-list">
            <div
                class="list-item"
                @click="systemClick('1')"
            >
                <div class="item-header">
                    <h2>系统一</h2>
                </div>
            </div>
            <div
                class="list-item"
                @click="systemClick('2')"
            >
                <div class="item-header">
                    <h2>系统二</h2>
                </div>
            </div>
            <div
                class="list-item"
                @click="systemClick('3')"
            >
                <div class="item-header">
                    <h2>添加新模板</h2>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const systemClick = (val: string) => {
    if (val == '1') {
        window.open('http://10.64.15.86:9002/index', '_blank')
    } else if (val == '2') {
        // window.location.href = 'http://localhost:5174/'
        window.open('http://localhost:5174', '_blank')
    } else if (val == '3') {
        router.push({
            name: 'home',
        })
    } else {
    }
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.template-container {
    min-width: 400px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2d3a4b;
}

.container-list {
    display: flex;
    .list-item {
        padding: 30px;
        margin: 20px;
        border-radius: 6px;
        background: #fff;
        min-width: 350px;
        cursor: pointer;
        .item-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 30px;
        }
    }
}
</style>
